<template>
	<view class="">
		<!-- 标题 -->
		<view class="" style="background-color: #E1EBFE;display: flex;height: 60rpx;">
			<view class="" style="flex: 6;display: flex;">
				<view class="" style="flex: 2;">

				</view>
				<view class=""
					style="flex: 4;display: flex;justify-content: center;align-items: center;font-size: 20rpx;color: #1D75FF;">
					保障项目
				</view>
			</view>
			<view class="" style="flex: 5;display: flex;">
				<view v-for="item in info.fananname" class=""
					style="display: flex;flex: 1;justify-content: center;align-items: center;color:#1D75FF;font-size: 20rpx;">
					{{item}}
				</view>

			</view>
		</view>
		<!-- 公众责任保险 -->
		<view class="" style="display: flex;font-size: 20rpx;" v-for="item in gzList">
			<view class="" style="flex: 6;display: flex;">
				<view class=""
					style="flex: 2;display: flex;justify-content: center; align-items: center;border: 1rpx solid #E1EBFE;border-top: none;">
					<span class="" style="width: 64rpx;">{{item.title}}</span>
				</view>
				<view class="" style="flex: 6;padding: 16rpx;padding-top: 0;border-bottom: 1rpx solid #E1EBFE;">
					<view v-for="items in item.projectList" class=""
						style="margin-top: 16rpx;background-color: #E1EBFE;display: flex;justify-content: center;padding: 10rpx 0rpx;">
						{{items.name}}
					</view>
				</view>
			</view>
			<view class="" style="flex: 5;border-bottom: 1rpx solid #E1EBFE;border-right: 1rpx solid #E1EBFE;">

				<view class="" style="display: flex;justify-content: space-around;">
					<view class=""
						style="display: flex;justify-content: center;padding: 10rpx 0rpx;margin-top: 16rpx;flex-direction: column;align-items: center;"
						v-for="p in info.fananlist">
						{{info.fanan[p].total_limit}}
					</view>
				</view>
				<view class="" style="display: flex;justify-content: space-around;">
					<view class=""
						style="display: flex;justify-content: center;padding: 10rpx 0rpx;margin-top: 16rpx;flex-direction: column;align-items: center;"
						v-for="p in info.fananlist">
						{{info.fanan[p].limit}}
					</view>
				</view>

				<view class="" style="display: flex;justify-content: space-around;">
					<view class=""
						style="display: flex;justify-content: center;padding: 10rpx 0rpx;margin-top: 16rpx;flex-direction: column;align-items: center;"
						v-for="p in info.fananlist">
						{{info.fanan[p].cc_limit}}
					</view>
				</view>


				<view class="" style="display: flex;justify-content: space-around;">
					<view class=""
						style="display: flex;justify-content: center;padding: 10rpx 0rpx;margin-top: 16rpx;flex-direction: column;align-items: center;"
						v-for="p in info.fananlist">
						{{info.fanan[p].sw_limit}}
					</view>
				</view>


				<view class="" style="display: flex;justify-content: space-around;">
					<view class=""
						style="display: flex;justify-content: center;padding: 10rpx 0rpx;margin-top: 16rpx;flex-direction: column;align-items: center;"
						v-for="p in info.fananlist">
						{{info.fanan[p].mr_limit}}
					</view>
				</view>


				<view class="" style="display: flex;justify-content: space-around;">
					<view class=""
						style="display: flex;justify-content: center;padding: 10rpx 0rpx;margin-top: 16rpx;flex-direction: column;align-items: center;"
						v-for="p in info.fananlist">
						{{info.fanan[p].mryl_limit}}
					</view>
				</view>


				<view class="" style="display: flex;justify-content: space-around;color:#EB4549">
					<view class=""
						style="display: flex;justify-content: center;padding: 10rpx 0rpx;margin-top: 16rpx;flex-direction: column;align-items: center;"
						v-for="p in info.fananlist">
						{{info.fanan[p].price_name}}
					</view>
				</view>


			</view>
		</view>

		<!-- 扩展火灾爆炸责任 -->
		<view class="" style="display: flex;font-size: 20rpx;" v-for="item in kzList">
			<view class="" style="flex: 6;display: flex;">
				<view class=""
					style="flex: 2;display: flex;justify-content: center; align-items: center;border: 1rpx solid #E1EBFE;border-top: none;">
					<span class="" style="width: 64rpx;">{{item.title}}</span>
				</view>
				<view class="" style="flex: 6;padding: 16rpx;padding-top: 0;border-bottom: 1rpx solid #E1EBFE;">
					<view v-for="items in item.projectList" class=""
						style="margin-top: 16rpx;background-color: #E1EBFE;display: flex;justify-content: center;padding: 10rpx 0rpx;">
						{{items.name}}
					</view>
				</view>
			</view>
			<view class=""
				style="flex: 5;border-bottom: 1rpx solid #E1EBFE;border-right: 1rpx solid #E1EBFE;">
				<view class="" style="display: flex;justify-content: space-around;">
					<view class=""
						style="display: flex;justify-content: center;padding: 10rpx 0rpx;margin-top: 16rpx;flex-direction: column;align-items: center;"
						v-for="p in info.fananlist">
						{{info.fire[p].total_limit}}
					</view>
				</view>
				<view class="" style="display: flex;justify-content: space-around;">
					<view class=""
						style="display: flex;justify-content: center;padding: 10rpx 0rpx;margin-top: 16rpx;flex-direction: column;align-items: center;"
						v-for="p in info.fananlist">
						{{info.fire[p].limit}}
					</view>
				</view>
				<view class="" style="display: flex;justify-content: space-around;">
					<view class=""
						style="display: flex;justify-content: center;padding: 10rpx 0rpx;margin-top: 16rpx;flex-direction: column;align-items: center;"
						v-for="p in info.fananlist">
						{{info.fire[p].car_limit}}
					</view>
				</view>
				<view class="" style="display: flex;justify-content: space-around;color:#EB4549">
					<view class=""
						style="display: flex;justify-content: center;padding: 10rpx 0rpx;margin-top: 16rpx;flex-direction: column;align-items: center;"
						v-for="p in info.fananlist">
						{{info.fire[p].name}}
					</view>
				</view>
			 


			</view>
		</view>
		<!-- 总保费 -->
		<view class="" style="display: flex;font-size: 20rpx;border: 1rpx solid #E1EBFE; border-top: none;">
			<view class="" style="flex: 6;display: flex;">
				<view class="" style="flex: 2;">
					 
				</view>
				<view class="" style="flex: 6;padding: 16rpx;padding-top: 0;color: #EB4549;">
					<view  class=""
						style="margin-top: 16rpx;background-color: #E1EBFE;display: flex;justify-content: center;padding: 10rpx 0rpx;">
						总保费
					</view>
				</view>
			</view>
			<view class="" style="flex: 5;">
				<view class="" style="display: flex;justify-content: space-around;color: #EB4549">
					<view class=""
						style="display: flex;justify-content: center;padding: 10rpx 0rpx;margin-top: 16rpx;flex-direction: column;align-items: center;"
						v-for="p in info.fananlist">
						{{info.fire[p].total_price}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {}
		},
		data() {
			return {
				gzList: [{
					title: '公众责任保险',
					projectList: [{
							name: '累计赔偿限额'
						},
						{
							name: '每次事故赔偿限额'
						},
						{
							name: '每次事故财产损失赔偿限额'
						},
						{
							name: '每次事故人身伤亡赔偿限额'
						},
						{
							name: '每次事故每人赔偿限额'
						},
						{
							name: '每人医疗费用赔偿限额'
						},
						{
							name: '保费'
						},
					],
					programme1: [{
							price: '200万'
						},
						{
							price: '100万'
						},
						{
							price: '50万'
						},
						{
							price: '50万'
						},
						{
							price: '20万'
						},
						{
							price: '10万'
						},
						{
							price: '80元/桩',
							active: true
						},
					],
					programme2: [{
							price: '300万'
						},
						{
							price: '100万'
						},
						{
							price: '50万'
						},
						{
							price: '50万'
						},
						{
							price: '20万'
						},
						{
							price: '10万'
						},
						{
							price: '100元/桩',
							active: true
						},
					],
					programme3: [{
							price: '500万'
						},
						{
							price: '100万'
						},
						{
							price: '50万'
						},
						{
							price: '50万'
						},
						{
							price: '20万'
						},
						{
							price: '10万'
						},
						{
							price: '150元/桩',
							active: true
						},
					]
				}],
				kzList: [{
					title: '扩展火灾爆炸责任',
					projectList: [{
							name: '累计赔偿限额'
						},
						{
							name: '单次限额'
						},
						{
							name: '每个车位限额'
						},
						{
							name: '保费'
						},

					],
					programme1: [],
					programme2: [{
							price: '300万'
						},
						{
							price: '100万'
						},
						{
							price: '50万'
						},

						{
							price: '100元/桩',
							active: true
						},
					],
					programme3: [{
							price: '500万'
						},
						{
							price: '100万'
						},
						{
							price: '50万'
						},

						{
							price: '150元/桩',
							active: true
						},
					]
				}]

			}
		},

		mounted() {
			this.getData()
		},
		methods: {
			getData() {
				console.log(this.info);

				this.kzList[0].programme1 = [{
						price: '200万'
					},
					{
						price: '100万'
					},
					{
						price: '50万'
					},

					{
						price: '80元/桩',
						active: true
					},
				];
				console.log(this.kzList);
			}
		}
	}
</script>

<style scoped lang="scss">
</style>